<template>
   <el-dialog title="发送短信" :visible.sync="visible" width="60%">
      <div>
        <el-form label-width="120px" size="mini">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="短信模板">
                <el-select
                  v-model="form.templateName"
                  placeholder="请选择"
                  @change="getmsgcontent"
                  size="mini"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="短信内容">
                <el-input type="textarea" style="color:#000" v-model="form.shortMessage" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- <el-form-item label="手机号码">
                <el-input type="text" v-model="form.phone"></el-input>
              </el-form-item> -->
              <el-form-item label="手机号码">
                <el-input  v-model="form.phoneNumberStr" disabled></el-input>
                <!--<el-select v-model="form.phone" placeholder="请选择" size="mini">

                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>-->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div style="display: flex; justify-content: flex-end">
        <el-button type="primary" size="mini" @click="save">确定</el-button>
        <el-button type="danger" size="mini" @click="visible = false">取消</el-button>
      </div>
    </el-dialog>
</template>

<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "80%",
    },
    row: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      form: {
        templateName:"",
        phone:"",
        shortMessage:"",
        taskTypeName:"",
        ...this.row,
      },
      rules: {},
      options: [],
      options1: [],
    };
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", val);
      },
    },
  },

  methods: {
    getPhoneNumbers() {
      let contactName = {

        identificationNumber: this.row.identificationNumber,
        batchNumber: this.row.batchNumber,
        cardNumber: this.row.cardNumber,

      };
      // debugger
      this.$axios({
        method: "post",
        url: `/CMC/quaCont/peopleInfo`,
        data: contactName,
      }).then((res) => {
        let phoneData = res.data.list||[];
        for(let i = 0 ; i < phoneData.length; i++) {
          if(null!=phoneData[i]){
            let obj = phoneData[i];
            if( null!=obj.phone && obj.phone !=''){
              this.options1.push({
                value: phoneData[i].phone,
                label: phoneData[i].phone
              })
            }
          }
        }

      });
    },

    getdata() {
      this.$http.get("/IAM/MC/template/showAll",{
        params: ''
      }).then( res => {
        for(let i = 0 ; i < res.data.content.length; i++) {

          this.options.push({
            value : res.data.content[i].templateId,
            label : res.data.content[i].templateName,
            content: res.data.content[i].templateContent
          })
        }
      })
    },
    getmsgcontent(val) {
      let data = this.options.find((item) => (item.value == val.value));
      this.form.shortMessage += data.content;
    },

    save() {
      if(!this.form.phone){
        this.$message.warning("请选择电话号码！");
        return ;
      }
      if(!this.form.shortMessage){
        this.$message.warning("请选择短信模板！");
        return ;
      }
      var type = "";

      let info = {
        batchNumber: this.row.batchNumber,
        cardNumber: this.row.cardNumber,
        phoneNumber: this.form.phoneNumber,
        templates: this.form.shortMessage
      }
      this.$axios({
        method: "post",
        url: "/CMC/api/tbCall/save/message",
        data: info
      }).then( res => {
        if(ress.code == "200"){
          this.$message.success("发送成功！");
        }else{
          this.$message.success("发送失败！");
        }
      })

      this.$message.success("发送成功");
      this.visible = false;
    }
  },
  mounted() {
    this.getdata();
    this.getPhoneNumbers();
  }
};
</script>

<style lang="scss" scoped>
.case-detail {
  padding: 10px 20px;
  background-color: #ffffff;
  border-radius: 10px;
}
::v-deep .el-tabs__active-bar {
  display: none;
}
::v-deep .el-tabs__item {
  height: auto;
}
::v-deep .el-tabs__item.is-active {
  color: #ffffff;
  background-color: #d10a14;
  padding: 0px;
  line-height: 30px;
  border-radius: 15px;
}

</style>
